<template>
  <div>
    <text-add-button text="新增规则" @click="handleAdd" />
    <el-table :data="localData" v-if="localData.length">
      <el-table-column label="规则名称" prop="name" align="center" show-overflow-tooltip />
      <!-- <el-table-column label="控制字段" prop="fields" align="center" show-overflow-tooltip /> -->
      <el-table-column label="状态" prop="fields" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.enable" type="success">启用</el-tag>
          <el-tag v-else type="primary">关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100px" align="center">
        <template #default="scope">
          <text-edit-button text="编辑" @click="handleEdit(scope)" />
          <text-delete-button @click="handleDelete(scope)" />
        </template>
      </el-table-column>
    </el-table>

    <display-rule-setting v-model="visiable" :data="curEditData" :options="options" @submit="handleSubmit" />
  </div>
</template>
  
  <script>
import displayRuleSetting from './displayRuleSetting.vue';
import { cloneDeep } from 'lodash-es';
import { randomString } from '@/utils/zmids';

export default {
  components: { displayRuleSetting },
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: [],
      curEditData: {},
      curEditIndex: 0,
      visiable: false,
      type: 'add'
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.localData = newVal;
      },
      immediate: true,
      deep: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      },
      deep: true
    }
  },
  methods: {
    handleAdd(command) {
      this.curEditData = {
        name: '',
        uuid: randomString(),
        enable: false,
        rules: [
          {
            logicalRelation: 'and',
            isGroup: true,
            root: true,
            children: []
          }
        ],
        fields: []
      };
      this.type = 'add';
      this.visiable = true;
    },
    handleEdit(scope) {
      const { row, $index } = scope;
      this.type = 'edit';
      this.curEditIndex = $index;
      this.curEditData = cloneDeep(row);
      this.visiable = true;
    },
    handleDelete(scope) {
      const { row, $index } = scope;
      this.localData.splice($index, 1);
    },
    handleSubmit(item) {
      if (this.type == 'add') {
        this.handleAdded(item);
      } else {
        this.handleUpdate(item);
      }
    },
    handleUpdate(item) {
      const clone = cloneDeep(item);
      this.localData.splice(this.curEditIndex, 1, clone);
    },
    handleAdded(item) {
      const clone = cloneDeep(item);
      this.localData.push(clone);
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.cycle-list {
  margin-top: 12px;

  .cycle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    border: 1px solid #333;

    .el-icon--right {
      display: none;
    }

    &:hover {
      .el-icon--right {
        display: unset;
      }
    }
  }
}
</style>
  